import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import './index.scss'

export default class ItemCard extends Component {
  static defaultProps = {
    key: '',
    item: {},
    onClick: () => {},
  }

  handleClick = () => {
    this.props.onClick()
  }

  render () {
    const { item, showFooter } = this.props
    return (
      <View className='comp'>
        <View key={item.skuId} className='comp-body' onClick={this.handleClick.bind(this)}>
          <Image className='item-img' src={item.itemImage} />
          <View className='item-info'>
            <View className='item-title'>
              {!!item.prefix && <Text className='item-title-tag'>{item.prefix}</Text>}
              <Text className='item-title-name' numberOfLines={1}>
                {item.itemName}
              </Text>

              <View className='item-title-num'>
                {'x' + item.itemNum}
              </View>
            </View>

            <View className='item-spec'>
              <Text className='item-spec-txt'>
                {item.itemSpec}
              </Text>
            </View>

            <View className='item-price'>
              <Text className='item-price-sale'>
                ¥{item.sellingPrice}
              </Text>
            </View>
          </View>
        </View>
        {
          showFooter &&
          <View className='comp-footer'>
            {this.props.children}
          </View>
        }
      </View>


    )
  }
}
